<template>
  <div @mouseup="dowm"
       @mousemove="move">
    <Popup :show="show"
           :tit="'请进行验证'">
      <div class="code-warp">
        <div class="img-warp">
          <div class="img-small"
               :style="{'left':left+'px'}"></div>
        </div>
        <!--  -->
        <div class="code_block"
             :class="{'isok':isOK}">
          <div v-if="isOK"
               class="oktext">验证成功</div>
          <div class="small-block"
               ref="codeBlcok"
               @mousedown="doThis"
               v-else
               :style="{'left':left+'px'}">
            <i class="icon-shuxian iconfont"></i>
          </div>
        </div>

      </div>
    </Popup>
  </div>
</template>

<script>
export default {

  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    doThis(e) {
      this.isMove = !this.isOK
      this.clickX = e.screenX
    },
    dowm() {
      this.isMove = false

      if (this.left >= 270 && this.left <= 300) {
        this.isOK = true
        
        this.$Message.success('验证通过')

        setTimeout(() => {
          this.$emit('isok')
          this.reset()
        }, 1000);

      } else {
        this.left = 20
        this.$Message.warning('验证失败，请重试')
      }
    },
    move(e) {
      if (!this.isMove) {
        return
      }
      let left = e.screenX - this.clickX + 20

      if (left >= 0 && left <= 350) {
        this.left = left
      }
    },
    reset() {
      this.isOK = false
      this.isMove = false
      this.left = 20
      this.clickX = 0
    }
  },
  data() {
    return {
      isOK: false,
      isMove: false,
      left: 20,
      clickX: 0
    }
  }
}
</script>

<style scoped>
.code-warp {
  width: 420px;
}
.img-warp {
  height: 240px;
}
.img-warp {
  background: url('~assets/img/code/hycdn_big.jpg') no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.code_block {
  /* height: 60px; */
  height: 20px;
  margin-top: 20px;
  /* border: 1px solid #ccc; */
  background-color: rgb(228, 228, 228);
  margin: 20px 0;
  border-radius: 10px;
  position: relative;
}
.img-small {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 20px;
  top: 54px;
  background: url('~assets/img/code/hycdn_small.png') no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}
.small-block {
  position: absolute;
  height: 40px;
  width: 60px;
  background-color: rgb(0, 122, 255);
  left: 25px;
  top: -10px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small-block i {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
.isok {
  background-color: #7bd239;
}
.oktext {
  text-align: center;
  color: #fff;
  line-height: 20px;
}
</style>